<template>
  <div class="modal" v-show="$store.state.isToBuy">
    <div class="modal_bg"></div>

    <div class="modal_content">
      <ul>
        <li class="header">
          <div class="left">
            <div>
              <img :src="detailData.goodsLogo" alt="" />
            </div>
            <div class="price">
              <span class="one">￥{{detailData.goodsPrice}}</span>
              <span class="two">剩余件数:{{detailData.goodsFav}}</span>
              <span class="two">请选择&nbsp;颜色</span>
            </div>
          </div>
          <div @click="closeBuy" class="right">X</div>
        </li>
        <li class="center">
          <p>颜色</p>
          <div>
            <img :src="detailData.goodsLogo" alt="" /><span>默认</span> <img src="" alt="" /><span
              >蓝色</span
            >
          </div>
        </li>
        <li class="footer">
          <span>购买数量</span>
          <div class="foot-in">
            <span>(限购10件)</span>
            <div class="stepper tanxin">
                 <div class="btn jian" @click="cutFn">-</div>
             
              <input type="text" value="1" v-model="stepNum" disabled />
              <div class="btn jia" @click="addFn">+</div>
            </div>
          </div>
        </li>
        <li class="bottom">
            <div class="left" @click="addToCartFn">加入购物车</div>
            <div class="right" @click="$router.push('/order')">立即购买</div>
        </li>
      </ul>
    </div>
    <div class="tan" v-show="isTan" >已添加购物车</div>
    <div class="tan" v-show="isTa" >已超出购买量</div>
    <div class="tan" v-show="isTn" >最低购买一件</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stepNum: 1,
       name:null,
      imag:null,
     isTan:false,
      price:null,
      isTa:false,
      isTn:false
    };
  },
  props:['detailData'],
  methods: {
     addToCartFn(){

    console.log(this.detailData);
    this.name=this.detailData.goodsName;
    this.imag=this.detailData.goodsLogo;
    this.count=this.stepNum
    this.price=this.detailData.goodsPrice
     var goods={
       name:this.name,
       imag:this.imag,
        count:this.count,
        price:this.price,
        flag:false
     }
     this.$store.commit('addToCart', goods);
     console.log(this.$store.state.cartList);
     console.log(goods);
     this.save()
     setTimeout(()=>{
      this.isTan=!this.isTan
     },2000)
    this.isTan=!this.isTan
  },
  save(){      
      localStorage.liuyan = JSON.stringify(this.$store.state.cartList);
       
    },
    closeBuy() {
      this.$store.commit("changeBuyShow", false);
    },
    // 增加数量
    addFn() {
      if (this.stepNum<10&&this.stepNum >= 0) {
        this.stepNum++;
      }else{
         setTimeout(()=>{
      this.isTa=!this.isTa
     },2000)
    this.isTa=!this.isTa
      }
      
    },
    // 减少数量
    cutFn() {
      if (this.stepNum <= 10 &&this.stepNum > 1) {
        this.stepNum--;
      }else{
         setTimeout(()=>{
      this.isTn=!this.isTn
     },2000)
    this.isTn=!this.isTn
      }
     
      console.log(this.stepNum);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
    .tan{
    position: absolute;
    /* border: 1px solid #000; */
      box-shadow: 0px 0px 2px 3px rgba(117, 117, 116, 0.5);
    background:rgba(245, 247, 248, 0.5);
    top:20%;
    left: 40%;
    width: 25%;
    height: 30px;
    text-align: center;
    line-height: 26px;
    border-radius: 5px;
    
  }
  .modal_bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .modal_content {
    width: 100%;
    height: 76vw;
    background: #fff;
    border-radius:20px 20px 0 0 ;
    position: absolute;
    left: 0;
    bottom: 0;
    .header {
      display: flex;
      justify-content: space-between;
      margin: 0 3vw;
      margin-top: 6vw;
      padding-bottom:3vw ;
      border-bottom: 1px solid #ccc;
     .left{
        display: flex;
         img{
        width: 45px;
        height: 45px;
        /* border: 1px solid #000; */
      }
      .price{
        margin-left: 3vw;
        
        span{
            display: block;
            
        }
        .one{
            color: red;
        }
        .two{
            font-size: 2vw;
            margin-top:3% ;
            color: #999999;
        }
      }
     }
    }
    .center{
        margin: 4vw 3vw;
         padding-bottom:3vw ;
      border-bottom: 1px solid #ccc;
      p{
         margin: 4vw 3vw;
      }
        img{
        width: 6vw;
        height: 6vw;
        /* border: 1px solid #000; */
        vertical-align: middle;
        margin-right: 2vw;
      }
      span{
        color: #999999;
        font-size: 3vw;
      }
    }
    .footer{
        display: flex;
        justify-content: space-between;
        margin: 0 3vw;
        margin-top:5vw ;
        align-items: center;
        font-size: 3.5vw;
        .foot-in{
            display: flex;
            justify-content: end;
            align-items: center;
            span{
                color: red;
            }
        }
         .stepper {
    display: flex;
    background: #fff;
    width: 105px;
    .btn {
      width: 30px;
      height: 32px;
      border: 1px solid #d1d1d1;
      text-align: center;
      box-sizing: border-box;
      line-height: 32px;
      color: #ccc;
      cursor: pointer;
    }
    input {
      width: 45px;
      border: 0;
      box-sizing: border-box;
      text-align: center;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }
  }
    }
    .bottom{
        display: flex;
        justify-content: center;
        margin: 5vw 3vw;
        div{
            width: 45%;
            height: 10vw;
            /* border: 1px solid #000; */
            text-align: center;
            line-height: 10vw;
            color: #fff;
        }
        .left{
            background: linear-gradient(90deg,rgb(245, 189, 34),rgb(245, 104, 23));
            border-radius:20px 0 0 20px ;
        }
        .right{
            background: linear-gradient(90deg,rgb(252, 71, 39),red);
            border-radius:0 20px  20px 0;
        }

    }
  }
 
}
</style>